<template>
	<view>
		<view class="ticket-order-header">
			<text>{{scName}}</text><text>{{typeName}}</text>
		</view>
		
		<view class="ticket-order-main">
			<view style="margin-top: 45rpx;">
				<p style="margin-top: 10rpx; margin-bottom: 20rpx;">
					<text>游玩日期</text>
				</p>
				<view class="date-choose">
					<view class="date-choose-item" @click="updateDate(1)" :class="{ active: dateValue==date? true:false}">
						<p>今天</p>
						<p style="margin-top: 20rpx;">{{date}}</p>
					</view>
					<view class="date-choose-item" @click="updateDate(2)" :class="{ active: dateValue==tomorrow? true:false}">
						<p>明天</p>
						<p style="margin-top: 20rpx;">{{tomorrow}}</p>
					</view>
					<view class="date-choose-item">
						<p>更多日期</p>
						<uni-datetime-picker
								type="date"
								:value="dateValue"
								:start="date"
								:end="maxDate"
								@change="change"
						/>
					</view>
				</view>
				<view style="margin-top:30rpx; font-weight: 700;" v-if = "dateValue!=null">
					<text>当前所选时间：{{dateValue}}</text>
					<text style="margin-left: 20rpx; font-size: 24rpx; font-weight: 500;">剩余数量：{{restNum}}</text>
					<text v-if = "restNum<cnt" style="font-size: 24rpx; color: red;">数量不足</text>
				</view>
			</view>
			
			<view style="display: flex; margin-top: 45rpx; justify-content: space-between">
				<p>
					<text>数量</text>
				</p>
				<view class="add-sub">
					<uni-icons type="minus" size="30" @click="sub()"></uni-icons>
					<view style="text-align: center; margin-top: 8rpx;">
						<text>{{cnt}}</text>
					</view>
					<uni-icons type="plus" size="30" @click="add()"></uni-icons>
				</view>
			</view>
			
			<view style="margin-top: 45rpx;">
				<p>
					<text>预订人信息</text>
				</p>
				<view class="book">
					<view class="book-name" v-for="(item,index) in bookPeople" :key = "item.idCard" 
						@click="chooseBook(index)" 
						:class="{isBookactive:bookIndex==index&&isChooseBook?true:false}">
						<text>{{item.name}}</text>
					</view>
					<view class="add-info" @click="buquaninfo(0,0)">
						<text>新增</text>
					</view>
				</view>
				<view class="book-detail">
					<view>
						<text style="font-size: 26rpx;">预订人</text>
					</view>
					<view>
						
						<view v-if = "isChooseBook">
							<p style="font-size: 25rpx;">姓名：{{bookPeople[bookIndex].name}}</p>
							<p style="font-size: 25rpx;">手机号：{{bookPeople[bookIndex].phone}}</p>
							<p style="font-size: 25rpx;">身份证：{{bookPeople[bookIndex].idCard}}</p>
						</view>
					</view>
					<view v-if="isChooseBook" @click="updateBook()">
						<uni-tag text="修改" type="primary" />
					</view>
				</view>
			</view>
			
			<view style="margin-top: 44rpx;">
				<p>
					<text>游玩人信息</text>
				</p>
				<view class="paly-item" v-for="(item,index) in playPeople" :key="index">
					<view>
						<text style="font-size: 26rpx;">游玩人{{index+1}}</text>
					</view>
					<view  style="margin-left: 50rpx;">
						<view v-if = "!item.isAll">
							<text @click="buquaninfo(1,index)" style="font-size: 25rpx; color: #00ed82;">点击补全信息</text>
						</view>
						<view v-if = "item.isAll">
							<p style="font-size: 25rpx;">姓名：{{playPeople[index].name}}</p>
							<p style="font-size: 25rpx;">手机号：{{playPeople[index].phone}}</p>
							<p style="font-size: 25rpx;">身份证：{{playPeople[index].idCard}}</p>
						</view>
					</view>
					
					<view>
						<uni-tag text="修改/添加" type="primary" @click="buquaninfo(2,index)"/>
					</view>
				</view>
			</view>
			
		</view>
		<fui-bottom-popup :show="show" @close="closePopup">
			<view class="fui-custom__wrap">
				<view class="example">
								<!-- 基础表单校验 -->
								<uni-forms ref="Form" :rules="rules" :modelValue="form">
									<uni-forms-item label="姓名" required name="name">
										<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
									</uni-forms-item>
									<uni-forms-item label="手机" required name="phone">
										<uni-easyinput v-model="form.phone" placeholder="请输入手机号" />
									</uni-forms-item>
									<uni-forms-item label="身份证"  required name="idCard" >
										<uni-easyinput  v-model="form.idCard" placeholder="身份证号" />
									</uni-forms-item>
								</uni-forms>
								<view style="display: flex;">
									<button type="primary" @click="submit('form')" style="width: 200rpx; height: 80rpx;">提交</button>
									<button type="primary" @click="cancel()"  style="width: 200rpx; height: 80rpx;">取消</button>
								</view>
								
				</view>
			</view>
		</fui-bottom-popup>
		
		<uni-popup ref="popup" background-color="#fff" @change="changePopup" :mask-click="false">
						<view style="width: 100%; height: 300rpx;">
							<view style="width: 100%; text-align: center;">
								<text style="font-size: 36rpx; font-weight: 700;">收银台</text>
							</view>
							<view style="width: 100%; margin-top: 20rpx; text-align: center;">
								<view style="height: 50rpx; line-height: 80rpx; margin-left: 15rpx;">
									<text>实付金额：
										<text style="color: red;">¥{{price*cnt}}</text>
									</text>
								</view>
								
								<view  style="margin-top: 60rpx; display: flex; justify-content: space-between;">
									<view @click="PayMoney()"style="width: 200rpx; height: 80rpx; line-height: 80rpx; background-color: #00d79c; border-radius: 15rpx; margin-left: 50rpx;">
										立即支付
									</view>
									<view @click="cancelPay()"style="width: 200rpx; height: 80rpx; line-height: 80rpx; background-color: slateblue; border-radius: 15rpx; margin-right: 50rpx;">
										取消
									</view>
								</view>
							</view>
						</view>
					</uni-popup>
		
			<view class="commit-order">
					<view class="commit-order-main">
						<view style="margin-left: 20rpx; margin-top: 10rpx;">
							<text style="font-size: 35rpx; color: red;">¥{{price*cnt}}</text>
						</view>
						<view style="margin-right: 20rpx;margin-bottom: 30rpx;" v-if = "restNum>=cnt && dateValue!=null">
							<fui-button radius="30rpx" btnSize="mini" style="height: 50rpx;" background="#ff6f0f" @click="toPay()">确认订单</fui-button>
						</view>
					</view>
			</view>
	</view>
	
</template>

<script>
	import "../../utils/my-date.js"
	import fuiBottomPopup from "@/components/firstui/fui-bottom-popup/fui-bottom-popup.vue"
	import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
	export default {
		components:{
				fuiBottomPopup,
				fuiButton
			},
			
		data() {
			return {
				DateNum:[],
				restNum:null,
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号'
						}, {
							format: 'number',
							errorMessage: '手机号只能是数字'
						},
						]
					},
					idCard: {
						rules: [{
							required: true,
							errorMessage: '身份证不能为空'
						}]
					},
					
				},
				createOrderId:null,
				show: false,
				scId:'',
				typeId:1,
				scName:'111',
				price:0,
				typeName:'',
				cnt:1,
				date:null,
				tomorrow:null,
				dateValue:null,
				maxDate:null,
				isactive:0,
				
				isChooseBook:false,
				bookIndex:null,
				updateIndex:null,
				isAddbook:false,
				defaultPaly:{
					id:null,
					name:null,
					phone:null,
					idCard:null,
					isAll:false
				},
				isupdateBook:false,
				form:{
					id:null,
					name:null,
					phone:null,
					idCard:null,
					isAll:false
				},
				playPeople:[
					{
						id:null,
						name:1,
						phone:1,
						idCard:1,
						isAll:false
					}
				],
				bookPeople:[{
						id:null,
						userId:null,
					    name:"zjc",
						phone:"12345678",
						idCard:"111123211111"
					},
					{
						id:null,
						userId:null,
						name:"周佳成",
						phone:"12345678",
						idCard:"11123211111"
					},
				],
				isCreateOrder:false
			}
		},
		onLoad(options){
			this.date = new Date().format("yyyy-MM-dd")
			var d = new Date()
			d.setDate(d.getDate()+1)
			this.tomorrow = d.format("yyyy-MM-dd")
			d.setDate(d.getDate()+6)
			this.maxDate = d.format("yyyy-MM-dd")
			this.scId=options.scId
			this.typeId=options.typeId
			this.scName = options.scName
			this.price= options.price
			if(this.typeId==1){
				this.typeName="成人票"
			}
			else if(this.typeId==2){
				this.typeName="儿童票"
			}
			else{
				this.typeName="学生票"
			}
			this.initTicket(this.scId)
			this.initBook()
		},
		watch:{
			dateValue:{
				 handler (val, oldval) {
				            let totalDays,diffDate
				            let myDate_1 = new Date().format("yyyy-MM-dd")
				           		
				            let myDate_2 = val
							myDate_1 =new Date(Date.parse(myDate_1.replace(/-/g,"/")))
							
				            myDate_2 =new Date(Date.parse(myDate_2.replace(/-/g,"/")))
				            // 将两个日期都转换为毫秒格式，然后做差
				            diffDate = Math.abs(myDate_2 - myDate_1) // 取相差毫秒数的绝对值
				           
				            totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
				            // console.log(totalDays)    
							this.updateRest(totalDays)
				        },
				immediate: true,
				deep:true
			}
			
		},
		methods: {
			updateRest(num){
				
				this.restNum = this.DateNum[num]
			},
			async initBook(){
				await this.request({
					url:'/book/list',
					method:'GET',
				}).then(res=>{
					if(res.code==='1'){
						this.bookPeople = res.data
					}
					
				})
			},
			addBook(da){
				 console.log(da)
				 this.request({
					url:"/book/add",
					method:'POST',
					data:da
				}).then(res=>{
					if(res.code==='1'){
						if(!this.isupdateBook){
							this.bookPeople.push(da)
						}else{
							this.isupdateBook = false
							this.bookPeople[this.bookIndex] = da
						}
						this.form = {}
					}
				})
			},
			initTicket(scId){
				this.request({
					url:'/ticket/dateNum',
					method:"GET",
					data:{
						scId:scId
					}
				}).then(res=>{
					if(res.code==='1'){
						this.DateNum = res.data
						
						
					}else{
						uni.showToast({
							icon:'error',
							title:'请求数据失败'
						})
					}
				}).catch(()=>{
					uni.showToast({
						icon:'error',
						title:'请求数据失败'
					})
				})
					
			},
			
			showPopup(type) {
				this.show = true
			},
			closePopup(type) {
				this.show = false
			},
			add(){
				if(this.cnt>=28){
					this.cnt=28
				}else{
					this.cnt++
					this.playPeople.push(this.defaultPaly)
				}
			},
			change(e) {
							this.dateValue = e;
							console.log("-change事件:", e);
			},
			sub(){
				if(this.cnt<=1){
					this.cnt=1
				}
				else{
					this.cnt--
					this.playPeople.pop()
				}
			},
			
			updateDate(id){
				if(id===1){
					this.dateValue=this.date
				}
				else if(id==2){
					
					this.dateValue=this.tomorrow
				}
			},
			chooseBook(index){
				
				if(this.bookIndex==null||this.bookIndex != index){
					this.isChooseBook = true
					this.bookIndex = index
				}else if (this.bookIndex == index){
					this.isChooseBook = false
					this.bookIndex = null
				}
				
			},
			updateBook(){
				this.isupdateBook = true
				this.form = this.bookPeople[this.bookIndex]
				this.show = true;
			},
			buquaninfo(flag,index){
				if(flag==0){
					this.isAddbook=true
					this.show=true
					return 
				}
				this.isAddbook=false
				this.updateIndex=index
				if(flag==2){
					this.form=this.playPeople[index]
				}
				this.show=true
			},
			submit(form){
				this.$refs.Form.validate().then(res=>{
							this.form.isAll=true
							if(!this.isAddbook&&!this.isupdateBook){
								this.playPeople[this.updateIndex]=this.form
								this.form = {}
							}
							else{
								
								this.addBook(this.form)
								this.form = {}
							}
							this.show=false
							this.form.isAll=false
						}).catch(err =>{
						uni.showToast({
							title: '请填写完整',
							icon:'none',
							duration: 1000
						});
				})
				
				
			},
			cancel(){
				this.form={}
				this.form.isAll=false
				this.show=false
			},
			
			
			toPay(){
				var flag = true
				if(this.dateValue == null){
					flag = false
					uni.showToast({
						title: '请填写时间',
						icon:'none',
						duration: 1000
					});
					return
				}
				if(this.bookIndex == null) {
					flag = false
					uni.showToast({
						title: '请填写预订人',
						icon:'none',
						duration: 1000
					});
					return
				}
				for(let item of this.playPeople){
					if(!item.isAll){
						flag = false
						uni.showToast({
							title: '请完善游玩人信息',
							icon:'none',
							duration: 1000
						});
						return
					}
				}
				if(flag){
					var date1 = new Date(Date.parse(this.dateValue.replace(/-/g,"/"))) 
					var postData = {
						bookPerson:this.bookPeople[this.bookIndex],
						playerPerson:this.playPeople,
						scId:this.scId,
						date:date1,
						typeId:this.typeId,
						scName:this.scName,
						num:this.cnt,
						price:this.price
					}
					this.request({
						url:'/ticket-order/create',
						method:'POST',
						data:postData
					}).then(res=>{
						if(res.code==='1'){
						
							this.createOrderId = res.data
							uni.showToast({
								title: '提交订单成功',
								icon:'success',
								duration: 1000
							});
							
						}else{
							uni.showToast({
								title: '提交订单失败',
								icon:'error',
								duration: 1000
							});
						}
					}).catch(()=>{
						uni.showToast({
							title: '提交订单失败',
							icon:'error',
							duration: 1000
						});
					})
					
					this.$refs.popup.open('bottom')
				}
				
			},
			async PayMoney(){
				await this.request({
					url:'/ticket-order/pay',
					method:'GET',
					data:{
						orderId:this.createOrderId
					}
				}).then(res=>{
					if(res.code==='1'){
						uni.showToast({
							icon:'success',
							title:'支付成功',
							duration:2000
						})
						this.$refs.popup.close()
						uni.navigateTo({
							url:'/pages/pay-view/pay-view'
						})
						this.$refs.popup.close()
						window.location.reload()
					}else{
						uni.showToast({
							icon:'error',
							title:'支付失败',
							duration:2000
						})
					}
				}).catch(()=>{
					uni.showToast({
						icon:'error',
						title:'支付失败',
						duration:2000
					})
				})
				
				this.$refs.popup.close()
				
			},
			cancelPay(){
				uni.showToast({
					icon:'error',
					title:'您已经取消支付',
					duration:2000
				})
				uni.navigateTo({
					url:'/pages/my-ticket-order/my-ticket-order'
				})
				this.$refs.popup.close()
				window.location.reload()
			},
		}
	}
</script>

<style scoped>
	/* 自定义内容区样式需自行控制 */
.fui-custom__wrap {
		width: 100%;
		height: 520rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

.book-detail{
	width: 90%;
	margin-top: 25rpx;
	margin-left: 15rpx;
	margin-right: 20rpx;
	display: flex;
	justify-content: space-between;
}
.date-choose {
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 100rpx;
}
.book {
	display: flex;
	width: 100%;
	margin-top: 15rpx;
	
}
.paly-item {
	width: 90%;
	margin-top: 25rpx;
	margin-left: 15rpx;
	margin-right: 20rpx;
	display: flex;
	justify-content: space-between;
}
.book-name {
	width: 120rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
}

.book view {
	border: #edededf1 solid 1rpx;
	margin-left: 20rpx;
	border-radius: 10rpx;
}
.add-info {
	position: absolute;
	width: 120rpx;
	height: 70rpx;
	line-height: 70rpx;
	right: 60rpx;
	text-align: center;
}
.ticket-order-header {
	width: 100%;
	margin-left: 24rpx;
	margin-top: 24rpx;	
}
.ticket-order-header text {
	font-size: 35rpx;
	font-weight: 700;
}
.ticket-order-main{
	margin-left: 24rpx;
	margin-top: 24rpx;	
}
.ticket-order-header view{
	width: 100%;
	margin-top: 25rpx;
}
.ticket-order-main view p text{
	font-size: 35rpx;
	font-weight: 700;
}
.date-choose-item {
	border: #b9b9b9 solid 2rpx;
	width: 200rpx;
	height: 100rpx;
	text-align: center;
	border-radius: 5rpx;
}
.active {
	background-color: #00c700;
}
.isBookactive {
	background-color: #00c700;
}
.add-sub {
	display: flex;
	width: 200rpx;
	margin-left: 24rpx;
}
.add-sub text{
	text-align: center;
	margin-bottom: 10rpx;
}
.commit-order{
	position: fixed;
	bottom: 0rpx;
	width: 100%;
}
.commit-order-main {
	display: flex;
	width: 100%;
	justify-content: space-between;
	text-align: center;
}

</style>
